<template>
  <SlotUseChildren>
    <!-- 隐式默认插槽，插槽内容覆盖默认内容 -->
    <div v-for="item in 'ABC'" :key="item">
      <span class="message">{{ message }}默认插槽</span>
      <span>提供内容{{ item }}</span>
    </div>

    <!-- 具名插槽，v-slot指定插槽名称 -->
    <template v-slot:slot-name><!-- v-slot:slot-name可简写为#slot-name -->
      <div v-for="item in 'AB'" :key="item">
        <span class="message">{{ message }}具名插槽</span>
        <span>提供内容{{ item }}</span>
      </div>
    </template>

    <!-- 动态插槽名 -->
    <template #[dynamicSlotName]>
      <div v-for="item in 'ABCD'" :key="item">
        <span class="message">{{ message }}动态插槽名</span>
        <span>提供内容{{ item }}</span>
      </div>
    </template>
  </SlotUseChildren>
</template>

<script>
import {defineComponent} from 'vue';
import SlotUseChildren from '@/components/slot-use/SlotUseChildren.vue';

export default defineComponent({
  name: 'SlotUse',
  components: {SlotUseChildren},
  data() {
    return {
      message: '父组件',
      dynamicSlotName: 'dynamic-slot-name'
    };
  }
});
</script>

<style scoped>
.message {
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
}
</style>